<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap-辅助类</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <a class="text-muted" href="#">该段落使用的muted样式</a><br>
    <a class="text-primary bg-primary" href="#">该段落使用了primary样式</a><br>
    <a class="text-success bg-success" href="#">该段落使用了success样式</a><br>
    <a class="text-info bg-info" href="#">该段落使用了info样式</a><br>
    <a class="text-warning bg-warning" href="#">该段落使用了warning样式</a><br>
    <a class="text-danger bg-danger" href="#">该段落使用了danger样式</a><br>

    <div class="pull-left bg-info">元素浮动到左边</div><br>
    <div class="pull-right bg-info">元素浮动到右边</div><br>
    <div class="center-block" style="background-color: #2aabd2">元素居中</div><br>

    <p class="show" style="display: none">该元素强制显示</p>
    <p class="hidden" >该元素强制隐藏</p>

    <a class="sr-only" href="#">跳转到主要内容</a><br>
    <a class="sr-only sr-only-focusable" href="#">跳转到主要内容</a>

    <p> .text-only 类将页面元素所包含的文本内容替换为背景图:</p>
    <div class="text-hide" style="background-color: #2aabd2">在 div 元素中插入一些文本。</div><br>

    <button type="button" class="close"><span aria-hidden="true">x</span><span class="sr-only">关闭</span></button><br>
    <button type="button" class="close" aria-hidden="true">&times;</button>

    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">一个链接</a></li>
            <li><a href="#">另一个链接 link</a></li>
            <li><a href="#">其他功能</a></li>
        </ul>
    </div>

    <p>插入符实例<span class="caret"></span></p>

    <div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
        <div class="pull-left" style="background-color: #2aabd2">左浮动</div>
        <div class="pull-right" style="background-color: #4cae4c">右浮动</div>
    </div>

    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label sr-only col-xs-3" for="email">邮箱</label>
            <div class="col-xs-9">
                <input type="text" placeholder="Enter email" class="form-control" id="email">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label sr-only sr-only-focusable col-xs-3" for="password">密码</label>
            <div class="col-xs-9">
                <input type="text" placeholder="Password" class="form-control" id="password">
            </div>
        </div>
    </form>

    <p class="visible-xs">超小型设备上可见</p>
    <p class="visible-sm">小型设备可见</p>
    <p class="visible-md">中型设备可见</p>
    <p class="visible-lg">大型设备可见</p>
</div>


<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>